<template>
  <el-dialog title="新增设备类型" :visible="isShowDialog" @close="btnDelete">
    <!-- 表单 -->
    <el-form ref="form" label-width="120px" :rules="rules" :model="typeList">
      <el-form-item label="型号名称" prop="name">
        <el-input v-model="typeList.name" style="width:88%" label="请输入" placeholder="请输入" maxlength="10" show-word-limit />
      </el-form-item>
      <el-form-item label="型号编码" prop="model">
        <el-input v-model="typeList.model" style="width:88%" placeholder="请输入(限制数字、字母、中划线、下划线)" maxlength="15" show-word-limit />
      </el-form-item>
      <el-form-item label="货道行数" prop="vmRow">
        <el-input-number v-model="typeList.vmRow" style="width:88%" controls-position="right" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="货到列数" prop="vmCol">
        <el-input-number v-model="typeList.vmCol" style="width:88%" controls-position="right" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="货道容量" prop="channelMaxCapacity">
        <el-input-number v-model="typeList.channelMaxCapacity" style="width:88%" controls-position="right" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="设备图片">
        <!-- <UploadImg /> -->
      </el-form-item>
    </el-form>
    <!-- footer插槽 -->
    <template>
      <el-row type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" @click="btnDelete">取消</el-button>
          <el-button type="primary" size="small" @click="btnOK">确定</el-button>
        </el-col>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { getVmNewType } from '@/api/table'
import { reviseVmType } from '@/api/goods'
export default {
  props: {
    isShowDialog: {
      type: Boolean,
      default: false
    }
    // typeList: {
    //   type: Object,
    //   required: true
    // }
    // vmList: {
    //   type: Object,
    //   required: true
    // }
  },

  data() {
    // const checkRepeatCode = async(rule, val, callback) => {
    //   const res = await getSearchVm()
    //   const data = res.data.currentPageRecords.find(item => item.model === val)
    //   console.log(data.model)
    //   if (data && (data.model !== this.formData.model)) {
    //     callback(new Error('设备编号不能重复'))
    //   } else {
    //     callback
    //   }
    // }
    return {
    //   id: this.vmList.typeId,
      //   vmList: this.vmList,
    //   typeList: this.vmList,
      typeList: {
        name: '',
        model: '',
        vmRow: '',
        vmCol: '',
        channelMaxCapacity: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        model: [
          { required: true, message: '请输入', trigger: 'blur' },
          { pattern: /^[A-Za-z0-9_-]+$/, message: '请输入正确的型号编码', trigger: 'blur' },
          { min: 1, max: 15, message: '请输入正确的型号编码' }
        //   { trigger: 'blur', validator: checkRepeatCode }
        ]
        // vmRow: [
        //   { required: true, message: 'Can\'t be empty', trigger: 'blur' }
        // ],
        // vmCol: [
        //   { required: true, message: '请输入', trigger: 'blur' }
        // ],
        // channelMaxCapacity: [
        //   { required: true, message: '请输入', trigger: 'blur' }
        // ]
      }
    }
  },
  created() {
    console.log(this.typeList)
  },
  methods: {
    async btnOK() {
      await this.$refs.form.validate()

      //   const res = this.allList.for(item => item.name === this.vmList.name)
      //   console.log('aaa', this.allList.currentPageRecords)

      //   const res = this.allList.currentPageRecords.find(item => item.name === this.vmList.name)

      //   for (const key in this.allList) {
      //     console.log('111', this.allList)
      //     console.log('222', this.allList[key])
      //     if (this.allList[key].name === this.vmList.name) {
      //       res = this.allList[key]
      //       return res
      //     }
      //   }
      //   console.log('aaa', res)
      //   if (this.id) {
      //     console.log(this.vmList)
      //     await reviseVmType(this.vmList)
      //   } else {
      //     console.log('111')
      //     await getVmNewType(this.vmList)
      //   }
      this.typeList.typeId ? await reviseVmType(this.typeList) : await getVmNewType(this.typeList)
      console.log(this.typeList)
      this.$message.success('添加成功')
      this.$emit('closeDialog')
      this.$emit('reload')
    },
    async btnDelete() {
      this.typeList = {
        name: '',
        model: '',
        vmRow: '',
        vmCol: '',
        channelMaxCapacity: ''
      }
      this.$refs.form.resetFields()
      this.$emit('closeDialog')
      this.$emit('reload')
    }

  }
}

</script>

<style scoped>
.el-tree {
  width: 88%;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 9;
  height: 200px;
  overflow: auto;
}
</style>
